<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_动画 品牌展示</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 12px;
            text-align: center;
        }
        a{
            color: #04d;
            text-decoration: none;
        }
        a:hover{
            color: #f50;
            text-decoration: underline;
        }

        .SubCategoryBox{
            width: 600px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }
        .SubCategoryBox ul{
            list-style: none;
        }
        .SubCategoryBox ul li{
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }
        .showmore , .showless{
            clear: both;
            text-align: center;
            padding: 10px;
        }
        .showmore a , .showless a{
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 24px;
            border: 1px solid #aaaaaa;
        }
        .showmore a span{
            padding-left: 12px;
            background: url("../../imgs/down.png") no-repeat 0 0;
        }
        .showless a span{
            padding-left: 15px;
            background: url("../../imgs/up.png") no-repeat 0 0;
        }
        .promoted a{
            color: #ff5500;
        }

    </style>


    <script type="text/javascript">
        $(function (){
            //基本初始状态
            $("li:gt(5):not(:last)").hide();
            $("li:contains('佳能')").addClass("promoted");
            $("li:contains('尼康')").addClass("promoted");

            //给功能的按钮添加绑定事件
            $("div div a").click(function (){
                //让某些品牌,显示,或隐藏
                $("li:gt(5):not(:last)").toggle();
                //功能按钮显示的文本以及角标的颜色
                //判断 品牌，当前是否可见
                if($("li:gt(5):not(:last)").is(":hidden")){
                    //品牌是隐藏的状态 1.显示全部品牌   === 角标向下
                    $("div div a span").text("显示全部品牌");
                    //每次操作的时候,应该将全部的样式进行清除,不然样式是不会改变的
                    $("div div").removeClass();
                    $("div div").addClass("showmore");
                }else{
                    //如果不是隐藏的 ， 显示精简品牌  角标向上
                    $("div div a span").text("显示精简品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showless");
                }
                return false;
            });
        })
    </script>
</head>
<body>
<p id="text_show">
    需求：
    1:点击按钮的时候,隐藏和显示卡西欧之后的品牌<br/>
    2:当显示全部内容的时候,按钮文本为"显示精简品牌"，然后,小三角形向上,所有的品牌为默认颜色<br/>
    3:当只显示精简品牌的时候,要隐藏卡西欧之后的品牌,按钮的文本为"显示全部品牌",然后小三角形向下<br/>
    并且把佳能,尼康的品牌颜色修改为红色(给li标签添加promoted样式即可)<br/>
</p>
    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(304400)</i></li>
            <li><a href="#">索尼</a><i>(27220) </i></li>
            <li><a href="#">三星</a><i>(20808) </i></li>
            <li><a href="#">尼康</a><i>(17821) </i></li>
            <li><a href="#">松下</a><i>(12289) </i></li>
            <li><a href="#">卡西欧</a><i>(8242) </i></li>
            <li><a href="#">富士</a><i>(14894) </i></li>
            <li><a href="#">柯达</a><i>(9520) </i></li>
            <li><a href="#">宾得</a><i>(2195) </i></li>
            <li><a href="#">理光</a><i>(4114) </i></li>
            <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
            <li><a href="#">明基</a><i>(1466) </i></li>
            <li><a href="#">爱国者</a><i>(3091) </i></li>
            <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
        </ul>
        <div class="showmore">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>
    </div>
</body>
</html>